<template>
  <div class="wait-commit-info">
    <div class="title">
      <div class="block"></div>
      <div class="word">
        订单详情
      </div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="step">
      <steps :step="step"></steps>
    </div>
    <div>
      <orderstatus>
        <template v-slot:status>
          待提交申请材料
        </template>
        <template v-slot:button>
          <el-button @click="goApply">申请进度</el-button>
          <el-button>提交申请材料</el-button>
          <el-button>关闭订单</el-button>
          <el-button class="el-button">备注订单</el-button>
        </template>
      </orderstatus>
    </div>
    <div>
      <info :orderId="orderId">
        <template>
          <el-table-column prop="deposit" label="押金金额"
            >￥100.00</el-table-column
          >
          <el-table-column prop="" label="申请费用金额"
            >￥6000.00</el-table-column
          >
        </template>
      </info>
    </div>
  </div>
</template>

<script>
import orderstatus from '../../../../component/orderstatus/orderstatus.vue'
import info from '../../../../component/base-payment-info/base-payment-info.vue'
import steps from '../../../../component/steps/steps.vue'

export default {
  inject: ['reload'],
  name: 'waitCommitInfo',
  components: {
    orderstatus, //订单状态
    info, //基本信息和支付信息
    steps, //步骤条

  },

  data() {
    return {
      orderId: '',//订单编号
      step: 1
 
    }
  },

  mounted() {
    this.$emit("routeName", "waitCommitInfo");
    if (window.sessionStorage.getItem('orderId')) {
      this.orderId = window.sessionStorage.getItem('orderId')
    }
  },

  methods: {
    goApply() {
      this.$router.push({
        name: "applyProgress",
        params: {
          orderId: this.orderId,
        },
      });
    },
    refresh() {
      this.reload()
    },
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.step {
  margin: 40px 0; 
}
</style>
